<template>
  <div class="empl" :style="isShowGallery?'height: 100vh;overflow: hidden;':''">
    <!--拍品图片-->
    <div class="lot-detail-swiper">
      <mt-swipe :auto="3000" @change="imgChange">
        <mt-swipe-item  v-for="(v,k) in lotMediaList" :key="k">
          <div class="swipe-img" v-if="v.mediaType==1" :style="'backgroundImage: url('+(v.mediaUrl.substr(0,4).toLowerCase() == 'http' ? v.mediaUrl : resUrl+v.mediaUrl)+')'" @click="showGallery"></div>
          <div class="video-box" v-if="v.mediaType==2" @click="showGallery">
            <video class="video" :src="v.mediaUrl.substr(0,4).toLowerCase() == 'http' ? v.mediaUrl : resUrl+v.mediaUrl" controls controlsList="noremoteplayback nodownload" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>
          </div>
        </mt-swipe-item>
      </mt-swipe>

      <div class="time-bar" v-if="lotDetail.status==release&&lotDetail.startTime<lotDetail.timestamp&&lotDetail.timestamp<lotDetail.endTime">
        <span class="icon icon-shijian"></span><span class="time-title">距结拍</span>
        <count-down :endTime="lotDetail.endTime" :timestamp="lotDetail.timestamp" endText="已经结束了"></count-down>
      </div>
      <div class="time-bar" v-else-if="lotDetail.status==release&&lotDetail.startTime>lotDetail.timestamp">
        <span class="icon icon-shijian"></span><span class="time-title">距开拍</span>
        <count-down :endTime="lotDetail.startTime" :timestamp="lotDetail.timestamp" endText="已经开始了"></count-down>
      </div>
      <div class="time-bar" v-else>
        <span class="icon icon-shijian"></span><span class="time-title">已结束</span>
      </div>
    </div>

    <!--价格详情-->
    <div class="detail-box">
      <div class="title-box">
        <div class="title">
          <h3>{{lotDetail.name}}</h3>
          <p v-if="lotDetail.type==fixedPrice">一口价：<span>￥{{lotDetail.fixedPrice | toDecimal}}</span></p>
          <p v-else>当前价：<span>￥{{lotDetail.currentPrice | toDecimal}}</span></p>
        </div>
        <div class="history">
          <router-link :to="{name:'historyKnowledge'}">
            <img src="../../../static/images/lotDetail/history.png" alt="">
          </router-link>
        </div>
      </div>

      <ul class="price-box">
        <li v-if="lotDetail.type!=fixedPrice"><span>一口价</span> ￥{{lotDetail.fixedPrice | toDecimal}}</li>
        <li v-if="lotDetail.type!=fixedPrice"><span>加价幅度</span> ￥{{lotDetail.bidIncrements | toDecimal}}</li>
        <li><span>保证金</span> ￥{{lotDetail.cashDeposit | toDecimal}}</li>
        <li><span>邮费</span> ￥{{lotDetail.postage | toDecimal}}</li>
        <li v-if="lotDetail.type!=fixedPrice"><span>起拍价</span> ￥{{lotDetail.startingPrice | toDecimal}}</li>
        <li v-if="lotDetail.type!=fixedPrice"><span>出价</span> {{lotDetail.bidTimes}}次</li>
        <li><span>浏览</span> {{lotDetail.viewTimes}}次</li>
      </ul>

      <div class="text">
        <p class="introduce" :class="{active:isActive}" ref="introduce">
          {{lotDetail.presentation}}
        </p>
        <div class="more" @click="introduceShow" ref="more"></div>
      </div>

    </div>

    <div class="splitBlock"></div>

    <!--竞价记录-->
    <div class="bid-record">
      <div class="record-title">
        <p>竞拍记录 <span>{{lotBidHisTotal==0?'':'('+lotBidHisTotal+'次出价)'}}</span></p>
        <p @click="lotBidHisListAllShow" v-if="lotBidHisTotal>5">查看全部<span class="icon icon-more"></span></p>
      </div>
      <ul class="record">
        <li v-if="lotBidHisTotal==0" class="no-bid-record">暂无出价记录</li>
        <li v-for="(lotBidHis,index) in lotBidHisList" :key="index">
          <div><span>{{index==0?'领先':'出局'}}</span>{{lotBidHis.userName}}</div>
          <div>{{lotBidHis.currentPrice | toDecimal}}</div>
          <div>{{lotBidHis.bidTime | convertDate2}}</div>
        </li>
      </ul>
    </div>

    <div class="splitBlock"></div>

    <!--店铺名称-->
    <div class="weui-panel__bd shop-name">
      <router-link :to="{name:'shopDetail',query:{shopId:lotDetail.shopId}}" class="weui-media-box weui-media-box_appmsg">
        <div class="weui-media-box__hd" v-if="!shopDetail.smImageUrl"></div>
        <div class="weui-media-box__hd" v-if="shopDetail.smImageUrl" :style="'backgroundImage: url('+(shopDetail.smImageUrl.substr(0,4).toLowerCase() == 'http' ? shopDetail.smImageUrl : resUrl+shopDetail.smImageUrl)+')'"></div>
        <div class="weui-media-box__bd">
          <h4 class="weui-media-box__title">{{shopDetail.name}}</h4>
          <p class="weui-media-box__desc">
            <span v-if="shopDetail.type==person">认证个人</span>
            <span v-if="shopDetail.type==organization">认证店铺</span>
          </p>
        </div>
        <span class="weui-cell__ft">进入店铺 <span class="icon icon-more"></span></span>
      </router-link>
    </div>

    <div class="splitBlock"></div>

    <!--评论记录-->
    <div class="comment">
      <div class="record-title">
        <p>评论记录 <span>{{lotCommentTotal==0?'':'('+lotCommentTotal+'条评论)'}}</span></p>
        <p @click="commentListAllShow" v-if="lotCommentTotal>3">查看全部<span class="icon icon-more"></span></p>
      </div>
      <div class="weui-panel__bd">
        <div v-if="lotCommentTotal==0" class="no-comment-record">暂无评论记录</div>
        <div class="weui-media-box weui-media-box_appmsg" v-for="comment in lotCommentList" :key="comment.id">
          <div class="weui-media-box__hd">
            <img class="weui-media-box__thumb" v-if="!comment.userHeadImgUrl" src="../../../static/images/shiming/touxiang.png" alt="">
            <img class="weui-media-box__thumb" v-if="comment.userHeadImgUrl" :src="comment.userHeadImgUrl" alt="">
          </div>
          <div class="weui-media-box__bd">
            <h4 class="weui-media-box__title">{{comment.userName}} <span>发表于 {{comment.commentTime | convertDate2}}</span></h4>
            <p class="weui-media-box__desc single-text">{{comment.content}}</p>
          </div>
          <span class="weui-cell__ft">
            <div>
              <span class="icon icon-dianzan" @click="greatClick(comment.id)"></span>
              <span>{{comment.greatNum}}</span>
            </div>
            <div>
              <span class="icon icon-aui-icon-comment" @click="replyClick(comment.id,comment.userName)"></span>
              <span>{{comment.replyNum}}</span>
            </div>
          </span>
        </div>

      </div>

      <div class="send-message" v-if="!isReply">
        <!--<input class="weui-input" type="text" placeholder="我来说两句" @focus="showSend" @blur="hiddenSend" v-model="msg"/>-->
        <!--<span class="send" v-show="isShowSend" @click="sendMsg">发送</span>-->
        <textarea id="textarea" class="weui-textarea" rows="1" placeholder="我来说两句" @focus="showSend" @blur="hiddenSend" v-model="msg"></textarea>
        <span class="send" @click="sendMsg">发送</span>
      </div>
    </div>

    <div class="reply-Msg-box" v-if="isReply">
      <div class="send-message">
        <!--<input ref="replyMsg" v-focus class="weui-input" type="text" placeholder="" @blur="hiddenSendReply" v-model="replyMsg"/>-->
        <textarea id="textarea1" ref="replyMsg" v-focus class="weui-textarea" rows="1" placeholder="" @blur="hiddenSendReply" v-model="replyMsg"></textarea>
        <span class="send" @click="sendReplyMsg">发送</span>
        <span class="reply">回复{{parentCommentUserName}}:</span>
      </div>
    </div>


    <!--竞价记录模态框-->
    <div :class="{actionsheetToggle:isShowlotBidHisList}">
      <div class="weui-mask_transparent actionsheet__mask"></div>
      <div class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
          <div class="bid-record">
            <div class="record-title">
              <p>竞拍记录<span>({{lotBidHisTotal}}次出价)</span></p>
              <p><span class="weui-icon-cancel" @click="lotBidHisListAllHide"></span></p>
            </div>
            <ul class="record">
              <li v-for="(lotBidHis,index) in lotBidHisListAll" :key="index">
                <div><span>{{index==0?'领先':'出局'}}</span>{{lotBidHis.userName}}</div>
                <div>{{lotBidHis.currentPrice | toDecimal}}</div>
                <div>{{lotBidHis.bidTime | convertDate2}}</div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>

    <!--评论记录模态框-->
    <div :class="{actionsheetToggle:isShowCommentList}">
      <div class="weui-mask_transparent actionsheet__mask"></div>
      <div class="weui-actionsheet">
        <div class="weui-actionsheet__menu">
          <div class="comment">
            <div class="record-title">
              <p>{{lotCommentTotal}}条评论</p>
              <p><span class="weui-icon-cancel" @click="CommentListAllHide"></span></p>
            </div>
            <div class="weui-panel__bd">
              <div class="comment-box" v-for="comment in lotCommentListAll" :key="comment.id">
                <a href="javascript:;" class="weui-media-box weui-media-box_appmsg parent-comment">
                  <div class="weui-media-box__hd">
                    <img class="weui-media-box__thumb" v-if="!comment.userHeadImgUrl" src="../../../static/images/shiming/touxiang.png" alt="">
                    <img class="weui-media-box__thumb" v-if="comment.userHeadImgUrl" :src="comment.userHeadImgUrl" alt="">
                  </div>
                  <div class="weui-media-box__bd">
                    <h4 class="weui-media-box__title">{{comment.userName}} <span>发表于 {{comment.commentTime | convertDate2}}</span></h4>
                    <p class="weui-media-box__desc">{{comment.content}}</p>
                  </div>
                  <div class="weui-cell__ft">
                    <div>
                      <span class="icon icon-dianzan" @click="greatClick(comment.id)"></span>
                      <span>{{comment.greatNum}}</span>
                    </div>
                  </div>
                </a>
                <div class="rereply-box" :class="{'rereply-box-border':comment.commentList.length!=0}">
                  <a href="javascript:;" class="weui-media-box weui-media-box_appmsg" v-for="(v,k) in comment.commentList" :key="k">
                    <div class="weui-media-box__hd">
                      <img class="weui-media-box__thumb" v-if="!v.userHeadImgUrl" src="../../../static/images/shiming/touxiang.png" alt="">
                      <img class="weui-media-box__thumb" v-if="v.userHeadImgUrl" :src="v.userHeadImgUrl" alt="">
                    </div>
                    <div class="weui-media-box__bd">
                      <h4 class="weui-media-box__title">{{v.userName}}</h4>
                      <p class="weui-media-box__desc">{{v.userName}}回复@{{comment.userName}}：{{v.content}}</p>
                    </div>
                  </a>

                </div>
              </div>


            </div>
          </div>
        </div>
      </div>
    </div>

    <!--出价框-->
    <div class="pay-box" :class="{actionsheetToggle:isShowPayBox}">
      <div class="weui-mask_transparent actionsheet__mask" id="mask"></div>
      <!--保证金-->
      <div class="weui-actionsheet" v-show="isCashDeposit">
        <div class="weui-actionsheet__menu">
          <div class="weui-cell pay-title">
            <div class="weui-cell__bd">
              <p>保证金</p>
              <span class="weui-icon-cancel" @click="closePayBox"></span>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">保证金金额</label></div>
            <div class="weui-cell__bd">
              <input class="weui-input" type="number" pattern="[0-9]*" placeholder="请输入保证金金额" v-model="payCashDepositNum"/>
            </div>
          </div>
          <a class="weui-cell weui-cell_access" href="javascript:;" @click="showPayOption">
            <div class="weui-cell__bd">
              <p>支付方式</p>
            </div>
            <div class="weui-cell__ft">{{ePayChannel.name}}</div>
          </a>
          <div class="weui-cell pay-warn">
            <div class="weui-cell__bd">
              <span class="weui-icon-warn"></span><p>保证金仅作冻结，竞拍不成功将立即全额原路退换；竞拍成功，但不付款将扣除全部保证金</p>
            </div>
          </div>
        </div>
        <div class="weui-actionsheet__action pay-btn-box">
          <div class="weui-actionsheet__cell" @click="payCashDeposit">立即支付</div>
        </div>
      </div>

      <!--支付方式-->
      <div class="weui-actionsheet pay-option" v-show="isShowPayOption">
        <div class="weui-actionsheet__menu">
          <div class="weui-cells_radio">
            <div class="weui-cell pay-title">
              <div class="weui-cell__bd">
                <p>请选择支付方式</p>
              </div>
            </div>
            <label class="weui-cell weui-check__label" v-for="(v,k) in ePayChannelList" :key="k" :for="v.val" @click="selectPayChannel(v)">
              <div class="weui-cell__bd">
                <p>{{v.name}}</p>
              </div>
              <div class="weui-cell__ft">
                <input type="radio" class="weui-check" name="radio1" :id="v.val" :checked="ePayChannel.val == v.val">
                <span class="weui-icon-checked"></span>
              </div>
            </label>
          </div>
        </div>
        <div class="weui-actionsheet__action">
          <div class="weui-actionsheet__cell" @click="closePayOption">确定</div>
        </div>
      </div>

      <!--竞拍出价-->
      <div class="weui-actionsheet" v-show="isShowBidPay">
        <div class="weui-actionsheet__menu lot-bid-box">
          <div class="weui-cell pay-title">
            <div class="weui-cell__bd">
              <p>拍品竞拍</p>
              <span class="weui-icon-cancel" @click="closePayBox"></span>
            </div>
          </div>
          <div class="weui-cell">
            <div class="weui-cell__hd"><label class="weui-label">出价方式</label></div>
            <div class="weui-cell__bd">
              <ul>
                <li :class="{active:bidModeIndex==index}" v-for="(bidMode,index) in bidModeList" :key="index" @click="bidModeClick(index,bidMode.id)">{{bidMode.name}}</li>
              </ul>
            </div>
          </div>
          <div class="weui-cell bid-text">
            <div class="weui-cell__bd">
              一次出价至少高于拍品当前价1个加价幅度；委托出价将由系统替你出价，至少高于拍品当前价的5个加价幅度，最后成交价以买家最后实际出价为准；<a href="javascript:;">了解更多</a>
            </div>
          </div>

          <div  v-if="bidModeId==0||bidModeId==1">
            <div class="weui-cell bid-price">
              <div class="weui-cell__bd">
                出价金额
              </div>
              <div class="weui-cell__ft">
                <span class="reduce-price" @click="reducePrice"><img src="../../../static/images/lotDetail/reduce.png" alt=""></span><input class="weui-input" type="text" v-model="currentPrice"><span class="add-price" @click="addPrice"><img src="../../../static/images/lotDetail/add.png" alt=""></span>
              </div>
            </div>
            <div class="weui-cell bid-increments">
              <div class="weui-cell__bd">
                加价幅度
              </div>
              <div class="weui-cell__ft">￥{{lotDetail.bidIncrements | toDecimal}}元</div>
            </div>
            <div class="weui-cell weui-cell_switch">
              <div class="weui-cell__bd">
                匿名竞拍
              </div>
              <div class="weui-cell__ft">
                <input class="weui-switch" type="checkbox"/>
              </div>
            </div>
          </div>

          <div v-if="bidModeId==2">
            <div class="weui-cell bid-price"></div>
            <div class="weui-cell bid-increments">
              <div class="weui-cell__bd">
                一口价金额
              </div>
              <div class="weui-cell__ft">￥{{lotDetail.fixedPrice | toDecimal}}元</div>
            </div>
            <div class="weui-cell weui-cell_switch"></div>
          </div>

        </div>
        <div class="weui-actionsheet__action pay-btn-box">
          <div class="weui-actionsheet__cell" @click="payBidPrice">{{bidModeId==2?'立即购买':'立即出价'}}</div>
        </div>
      </div>

    </div>


    <!--footer-->
    <div class="weui-tab">
      <div class="weui-tab__panel">

      </div>
      <div class="weui-tabbar">
        <router-link :to="{name:'shopDetail',query:{shopId:lotDetail.shopId}}" class="weui-tabbar__item">
          <span class="weui-tabbar__icon dianpu"></span>
          <p class="weui-tabbar__label">店铺</p>
        </router-link>
        <router-link :to="{name:'wait'}" href="javascript:;" class="weui-tabbar__item">
          <span class="weui-tabbar__icon lxmj"></span>
          <p class="weui-tabbar__label">联系卖家</p>
        </router-link>
        <a href="javascript:;" class="weui-tabbar__item" @click="followClick">
          <span class="weui-tabbar__icon icon icon-shoucang" :class="{red:isFollow}" style="font-size: 1.1rem"></span>
          <p class="weui-tabbar__label" :class="{red:isFollow}">关注</p>
        </a>
        <a href="javascript:;" class="weui-tabbar__item buy">


          <button class="weui-btn weui-btn_warn" style="background-color: #C3C3C3" v-if="lotDetail.type==collection">藏品不可购买</button>
          <button class="weui-btn weui-btn_warn" style="background-color: #C3C3C3" v-else-if="lotDetail.status==deal">已成交</button>
          <button class="weui-btn weui-btn_warn" v-else-if="lotDetail.status==release&&lotDetail.startTime<lotDetail.timestamp&&lotDetail.timestamp<lotDetail.endTime" @click="payClick">{{lotDetail.type==fixedPrice?'立即购买':'立即出价'}}</button>
          <button class="weui-btn weui-btn_warn" style="background-color: #C3C3C3" v-else-if="lotDetail.status==release&&lotDetail.startTime>lotDetail.timestamp">即将开始</button>
          <button class="weui-btn weui-btn_warn" style="background-color: #C3C3C3" v-else-if="lotDetail.status==release">已结拍</button>

          <button class="weui-btn weui-btn_warn" style="background-color: #C3C3C3" v-else>不可购买</button>

        </a>
      </div>
    </div>

    <div class="weui-gallery" v-show="isShowGallery">
      <mt-swipe :auto="0" @change="galleryChange" style="height: calc(100vh - 2.5rem);" :showIndicators="false">
        <mt-swipe-item  v-for="(v,k) in lotMediaList" :key="k" ref="gallerySwipe">
          <img class="gallery-img vCenter" v-if="v.mediaType==1" :src="v.mediaUrl.substr(0,4).toLowerCase() == 'http' ? v.mediaUrl : resUrl+v.mediaUrl" @click="showImg(v.mediaUrl,lotMediaList)">
          <div class="video-box" v-if="v.mediaType==2">
            <video class="video" :src="v.mediaUrl.substr(0,4).toLowerCase() == 'http' ? v.mediaUrl : resUrl+v.mediaUrl" controls controlsList="noremoteplayback nodownload" webkit-playsinline playsinline x5-playsinline x-webkit-airplay="allow"></video>
          </div>
        </mt-swipe-item>
      </mt-swipe>
      <div class="close-gallery">
        <span @click="closeGallery">返回</span>
        <span>{{galleryIndex+1}}/{{lotMediaList.length}}</span>
        <span>保存</span>
      </div>
    </div>

  </div>
</template>

<script>
  import {ipconfig} from '../../assets/js/ipconfig';
  import {setStore,getStatusMapByKey,removeStore,autoTextarea,getUser,setUser,isWeiXin,getlocalStore,setlocalStore} from '../../assets/js/tools';
  import {getShopDetail,getProductDetail,getProductCommentList,getFollow,updateProductFollowers,sendComment,greatComment,saveBidHistory,saveRechargeOrder,getAccount,getDifferCashDeposit,getUserMsg} from '../../assets/js/getData';
  export default {
    name: "lotDetail",
    data(){
      return {
        resUrl:ipconfig.resUrl,//图片、视频、音频等资源访问路径
        lotId:null,//拍品ID
        shopId:null,//店铺

        release:null,//已发布拍品
        deal:null,//已结拍拍品
        auction:null,//竞拍拍品
        fixedPrice:null,//一口价拍品
        fixedPriceAndAuction:null,//一口价与竞拍拍品
        collection:null,//藏品
        person:null,//个人店铺
        organization:null,//机构店铺

        lotDetail:{},//拍品详情
        shopDetail:{},//店铺详情
        lotMediaList:[],//拍品图片音视频

        lotBidHisList:[],//竞拍记录
        lotBidHisTotal:null,//竞拍记录总数
        lotBidHisListAll:[],//所有竞拍记录

        lotCommentList:[],//评论记录
        lotCommentTotal:null,//评论记录总数
        lotCommentListAll:[],//所有评论记录

        isActive:false,
        isShowSend:false,//是否显示发送消息按钮

        isShowlotBidHisList:false,//是否显示竞价记录框
        isShowCommentList:false,//是否显示评论记录框

        user:null,
        userId:'',
        msg:'',//发送评论内容

        parentCommentId:null,//当前要回复的评论的id
        parentCommentUserName:null,//当前要回复的评论的作者
        replyMsg:'',//回复评论的内容
        isReply:false,

        bidModeList:[],//出价方式列表
        bidModeIndex:0,
        bidModeId:'',//当前出价方式

        payCashDepositNum:'',//输入的保证金金额

        currentPrice:'',//本次出价

        ePayChannelList:{},//支付方式
        ePayChannel:'',//当前支付方式

        isShowPayBox:false,//是否显示出价框
        isCashDeposit:false,//是否显示支付保证金
        isShowPayOption:false,//是否显示支付方式框
        isShowBidPay:false,//是否显示竞拍出价框

        isFollow:null,//是否关注

        isShowGallery:false,//是否显示预览图
        imgIndex:0,//当前轮播图索引
        galleryIndex:0,//预览图索引
      }
    },
    created(){
      document.body.scrollTop = document.documentElement.scrollTop = 0;

      let eProductStatus = getStatusMapByKey('eProductStatus');
      this.release =  eProductStatus.release.val;//已发布
      this.deal =  eProductStatus.deal.val;//已结拍


      let eProductType = getStatusMapByKey('eProductType');
      this.auction =  eProductType.auction.val;//竞拍拍品
      this.fixedPrice =  eProductType.fixedPrice.val;//一口价拍品
      this.fixedPriceAndAuction =  eProductType.fixedPriceAndAuction.val;//一口价与竞拍拍品
      this.collection =  eProductType.collection.val;//藏品

      let eShopType = getStatusMapByKey('eShopType');
      this.person = eShopType.person.val;//个人
      this.organization = eShopType.organization.val;//机构

      this.ePayChannelList = getStatusMapByKey('ePayChannel');//支付方式列表
      delete this.ePayChannelList.cashDeposit;
      this.ePayChannel = getStatusMapByKey('ePayChannel')['wxPay'];//默认当前支付方式

      this.lotId = this.$route.query.lotId;
      this.shopId = this.$route.query.shopId;

      removeStore('address');
      this.user = getUser();
      if(this.user) {
        this.userId = this.user.id;
        //用户是否关注
        this.getFollow();
      }
      //获取拍品详情
      this.getLotDetail(1);

      //获取店铺信息
      this.getShopDetail();
    },
    mounted(){
      var text = document.getElementById("textarea");
      autoTextarea(text,0,70);

    },
    directives: {
      focus: {
        // 指令的定义
        inserted: function (el) {
          el.focus()
        }
      }
    },
    methods:{
      showImg(url,mediaList){
        let urlList = [];
        for(let i=0;i<mediaList.length;i++){
          urlList.push(mediaList[i].mediaUrl.substr(0,4).toLowerCase() == 'http' ? mediaList[i].mediaUrl : this.resUrl+mediaList[i].mediaUrl)
        }
        if(isWeiXin()){
          WeixinJSBridge.invoke('imagePreview', {
            'current' : url.substr(0,4).toLowerCase() == 'http' ? url : this.resUrl+url,
            'urls' : urlList
          });
        }
      },
      //获取店铺详情
      async getShopDetail(){
        let params = {id:this.shopId};
        let res = await getShopDetail(params);
        if(res.data.reqResult.code>0){
          this.shopDetail = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //获取拍品详情
      async getLotDetail(type){
        let params = {};
        if(type==1){
          params = {
            id:this.lotId,
            type:type,
          }
        }else {
          params = {
            id:this.lotId,
          }
        }
        let res = await getProductDetail(params);
        if(res.data.reqResult.code>0){
          console.log(res);
          this.lotDetail = res.data.data;
          this.currentPrice = this.lotDetail.currentPrice+this.lotDetail.bidIncrements;
          this.lotMediaList = this.lotDetail.proMediaList;

          this.lotBidHisListAll = this.lotDetail.proBidHisList;
          this.lotBidHisTotal = this.lotBidHisListAll.length;
          this.lotBidHisList = this.lotBidHisListAll.slice(0,5);

          let commentListAll = this.lotDetail.proCommentList;
          this.lotCommentTotal = commentListAll.length;
          this.lotCommentList = commentListAll.slice(0,3);

          if(this.lotDetail.type==this.auction){
            //竞拍拍品
            this.bidModeList=[{id:1,name:'一次出价'},{id:0,name:'委托出价'}]//出价方式
          }else if(this.lotDetail.type==this.fixedPriceAndAuction){
            //一口价与竞拍拍品
            this.bidModeList=[{id:1,name:'一次出价'},{id:0,name:'委托出价'},{id:2,name:'一口价'}]//出价方式
          }else if(this.lotDetail.type==this.fixedPrice){
            //一口价拍品
            this.bidModeList=[{id:2,name:'一口价'}]//出价方式
          }
          if(this.lotDetail.type!=this.collection){
            this.bidModeId = this.bidModeList[0].id;
          }
          //存浏览记录
          // if(type==1){
          //   let history = getlocalStore('proHistory');
          //   let arr = [];
          //   if(history){
          //     let checkrepeat = false;
          //     arr = JSON.parse(history);
          //     arr.forEach(item => {
          //       if(item.id==this.lotDetail.id){
          //         checkrepeat = true;
          //       }
          //     });
          //     if(!checkrepeat){
          //       arr.unshift(this.lotDetail);
          //     }
          //   }else {
          //     arr.unshift(this.lotDetail);
          //   }
          //   setlocalStore('proHistory',arr);
          // }
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //获取所有评论列表
      async getLotCommentListAll(){
        let res = await getProductCommentList(this.lotId);
        if(res.data.reqResult.code>0){
          this.lotCommentListAll = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },
      //输入框获得焦点时显示发送按钮
      showSend(){
        this.isShowSend = true;
      },
      //输入框失去焦点时隐藏发送按钮
      hiddenSend(){
        this.isShowSend = false;
      },
      //发送评论
      async sendMsg(){
        if(getUser(this,this.$route.fullPath)){
          let params = {
              productId:this.lotId,
              content:this.msg,
            };
          let res = await sendComment(params);
          if(res.data.reqResult.code>0){
            this.msg = '';
            this.getLotDetail();
          }else {
            Toast(res.data.reqResult.msg);
          }
        }
      },
      //回复消息
      replyClick(id,name){
        if(getUser(this,this.$route.fullPath)){
          this.parentCommentId = id;
          this.parentCommentUserName = name;
          this.isReply = true;
          if(this.$refs.replyMsg){
            this.$refs.replyMsg.focus();
            // autoTextarea(this.$refs.replyMsg,0,70);
          }
        }
      },
      //发送回复消息
      async sendReplyMsg(){
        let params = {
            productId:this.lotId,
            content:this.replyMsg,
            parentCommentId:this.parentCommentId,
          };
        let res = await sendComment(params);
        if(res.data.reqResult.code>0){
          this.replyMsg = '';
          this.isReply = false;
          this.getLotDetail();
        }else {
          Toast(res.data.reqResult.msg)
        }
      },
      //回复输入框失去焦点时隐藏
      hiddenSendReply(){
        this.isReply = false;
      },

      //点赞
      async greatClick(id){
        let res = await greatComment(id);
        if(res.data.reqResult.code>0){
          this.getLotDetail();
          this.getLotCommentListAll();
        }else {
          this.getLotDetail();
          Toast(res.data.reqResult.msg)
        }
      },

      //切换出价方式
      bidModeClick(index,id){
        this.bidModeIndex=index;
        this.bidModeId = id;
        if(this.bidModeId==1){
          this.currentPrice = parseFloat(this.lotDetail.currentPrice) + parseFloat(this.lotDetail.bidIncrements);
        }else if(this.bidModeId==0){
          this.currentPrice = parseFloat(this.lotDetail.currentPrice) + parseFloat(this.lotDetail.bidIncrements*5);
        }

      },
      //出价减价
      reducePrice(){
        if(this.currentPrice>this.lotDetail.currentPrice+this.lotDetail.bidIncrements){
          this.currentPrice = parseFloat(this.currentPrice) - parseFloat(this.lotDetail.bidIncrements);
        }else {
          return
        }
      },
      //出价加价
      addPrice(){
        this.currentPrice = parseFloat(this.currentPrice) + parseFloat(this.lotDetail.bidIncrements);
      },
      //点击模态框立即出价按钮
      payBidPrice(){
        this.isShowPayBox=false;
        // move();
        if(this.bidModeId==2){
          //一口价
          this.currentPrice = this.lotDetail.fixedPrice;
          setStore('lotDetail',this.lotDetail);
          this.$router.push({name:'writeOrder'});
        }else {
          //拍品竞价
          saveBidHistory({
            productId:this.lotId,
            currentPrice:this.currentPrice,
            // bidType:this.bidModeId,
          }).then(res => {
            if(res.data.reqResult.code>0){
              Toast('出价成功');
              this.bidModeId = this.bidModeList[0].id;
              this.getLotDetail();
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        }
      },
      //支付保证金
      payCashDeposit(){
        if(!isNaN(this.payCashDepositNum)&&this.payCashDepositNum>0){
          this.isShowPayBox = false;
          // move();
          let txOrderType = getStatusMapByKey('eOrderType')['cashDepositRecharge'].val;//保证金
          saveRechargeOrder(txOrderType,this.payCashDepositNum,this.ePayChannel.val).then(res => {
            if(res.data.reqResult.code>0){
              Toast('支付成功');
              //获取用户账户信息
              getAccount().then(res => {
                if(res.data.reqResult.code>0){
                  setStore('accountInfo',res.data.data);
                }else {
                  Toast(res.data.reqResult.msg);
                }
              });
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        }else {
          Toast('支付金额不能小于0');
        }
      },

      //点击底部立即出价按钮
      payClick(){
        if(getUser(this,this.$route.fullPath)){
          //获取用户信息
          let idCardAudited =  getStatusMapByKey('eIdCardInfoStatus').audited.val;//个人已审核7
          let idCardAuditting =  getStatusMapByKey('eIdCardInfoStatus').auditting.val;//个人信息审核状态6
          let idCardNotPass =  getStatusMapByKey('eIdCardInfoStatus').notPass.val;//个人信息审核状态1
          getUserMsg().then(res => {
            if(res.data.reqResult.code>0){
              let data = res.data.data.user;
              //实名认证状态
              if(data.hasOwnProperty("userIdCardStatus")){
                this.user.userIdCardStatus = data.userIdCardStatus;
                setUser(this.user);
                if(this.user.userIdCardStatus==idCardAudited){
                  this.isShowPayBox = true;
                  // 判断用户是否缴纳保证金
                  getDifferCashDeposit(this.lotId,this.lotDetail.snapshootId,this.lotDetail.cashDeposit).then(res => {
                    if(res.data.reqResult.code>0){
                      if(res.data.data>0){
                        this.payCashDepositNum = res.data.data;
                        this.isCashDeposit = true;
                      }else {
                        this.isShowBidPay = true;
                      }
                    }else {
                      Toast(res.data.reqResult.msg);
                    }
                  });
                }else if(this.user.userIdCardStatus==idCardAuditting){
                  this.$router.push({name:'personAudit'});
                }else if(this.user.userIdCardStatus==idCardNotPass){
                  this.$router.push({name:'personFail'});
                }
              }else {
                this.$router.push({name:'personAut'});
              }
            }else {
              Toast(res.data.reqResult.msg);
            }
          });
        }
      },
      //关闭出价框
      closePayBox(){
        this.isShowPayBox = false;
        // move();
      },
      //显示支付方式
      showPayOption(){
        this.isCashDeposit = false;
        this.isShowPayOption = true;
      },
      //选择支付方式
      selectPayChannel(v){
        this.ePayChannel = v;
      },
      //关闭选择支付方式
      closePayOption(){
        this.isShowPayOption = false;
        this.isCashDeposit = true;
      },
      //点击收藏关注
      async followClick(){
        if(getUser(this,this.$route.fullPath)){
          if(this.isFollow){
            //取消关注
            let res = await updateProductFollowers(this.lotId,0);
            if(res.data.reqResult.code>0){
              this.getFollow();
              Toast('取消收藏成功');
            }else {
              Toast(res.data.reqResult.msg);
            }
          }else {
            //关注
            let res = await updateProductFollowers(this.lotId,1);
            if(res.data.reqResult.code>0){
              this.getFollow();
              Toast('收藏成功');
            }else {
              Toast(res.data.reqResult.msg);
            }
          }
        }
      },
      //获取用户是否关注
      async getFollow(){
        let res = await getFollow(this.lotId,1);
        if(res.data.reqResult.code>0){
          this.isFollow = res.data.data;
        }else {
          Toast(res.data.reqResult.msg);
        }
      },

      //查看更多拍品描述
      introduceShow(){
        this.isActive = !this.isActive;
      },
      //查看全部竞价记录
      lotBidHisListAllShow(){
        this.isShowlotBidHisList=true;
        // stop();
      },
      lotBidHisListAllHide(){
        this.isShowlotBidHisList=false;
        // move();
      },
      //查看全部评论
      commentListAllShow(){
        this.isShowCommentList = true;
        // stop();
        this.getLotCommentListAll();
      },
      CommentListAllHide(){
        this.isShowCommentList = false;
        // move();
      },
      //拍品轮播图切换
      imgChange(index){
        this.imgIndex = index;
      },
      //预览图切换
      galleryChange(index){
        this.galleryIndex = index;
      },
      //显示预览图
      showGallery(){
        console.log(this.imgIndex);
        // console.log(this.a);
        console.log(this.$refs.gallerySwipe);
        console.log(this.$refs.gallerySwipe[this.imgIndex]);
        // this.$refs.gallerySwipe[this.imgIndex].className += 'is-active';
        this.isShowGallery = true;
      },
      closeGallery(){
        this.isShowGallery = false;
      }
    },

  }
</script>

<style scoped>
  .weui-gallery{
    display: block;
    background-color: #828186;
    /*padding-top: 4.25rem;*/
  }
  .close-gallery{
    display: flex;
    background: #fff;
    height: 2.5rem;
    line-height: 2.5rem;
    padding: 0 1.9rem;
    justify-content: space-between;
    color: #656565;
    font-size: 0.75rem;
    position: absolute;
    width: 100%;
    bottom: 0;
  }
  .swipe-img{
    height: 100vw;
    background-origin: content-box;
    background-position:50% 50%;
    background-size:contain;
    background-repeat:no-repeat;
    background-color: rgba(0,0,0,0.2);
  }
  .time-bar{
    background-color: rgba(197,0,0,0.7);
    height: 1.6rem;
    color: #ffffff;
    font-size: 0.7rem;
    padding: 0 0.75rem;
    display: flex;
    align-items: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .time-bar .icon-shijian{
    color: #ffffff;
    font-size: 0.9rem;
    margin-right: 5px;
  }
  .time-title{
    margin-right: 5px;
  }
  .history{
    height: 2.75rem;
  }
  .history img{
    height: 100%;
  }
  /*价格详情*/
  .detail-box{
    padding: 1.1rem 0.7rem 0.8rem 0.7rem;
  }
  .title-box{
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
  }
  .title h3{
    color: #282828;
    font-size: 0.9rem;
    line-height: 0.9rem;
    font-weight: normal;
    margin-bottom: 0.55rem;
  }
  .title p{
    color: #282828;
    font-size: 0.75rem;
    line-height: 0.75rem;
  }
  .title span{
    display: inline-block;
    color: #c50000;
    font-size: 0.9rem;
    line-height: 0.9rem;
    font-weight: bold;
  }
  .price-box{
    display: flex;
    flex-wrap: wrap;
  }
  .price-box li{
    width: 50%;
    line-height: 1.4rem;
    font-size: 0.7rem;
    color: #282828;
  }
  .price-box span{
    color: #999999;
  }
  .text{
    margin-top: 0.75rem;
    color: #656565;
    font-size: 0.7rem;
  }
  .introduce{
    overflow : hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
    line-height: 1.1rem;
  }
  .introduce.active{
    display: block;
  }
  .more{
    width: 0.7rem;
    height: 0.7rem;
    background-image: url("../../../static/images/lotDetail/xiala.png");
    background-repeat: no-repeat;
    background-size: contain;
    margin: 0 auto;
    margin-top: 0.2rem;
  }
  /*竞价记录*/
  .bid-record,.comment{
    padding: 0.55rem 0.6rem 0.65rem 0.6rem;
  }
  .record-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 1.6rem;
    font-size: 0.7rem;
    color: #282828;
    border-bottom: 2px dotted #F2F2F2;
  }
  .record-title>p:first-child span{
    color: #656565;
  }
  .record-title .icon-more{
    font-weight: bold;
    font-size: 0.7rem;
  }
  .record{
    padding-top: 0.2rem;
  }
  .record li{
    display: flex;
    justify-content: space-between;
    height: 1.45rem;
    line-height: 1.45rem;
    color: #656565;
    border-bottom: 2px dotted #F2F2F2;
  }
  .record li:last-child{
    border-bottom: none;
  }
  .record li>div:first-child{
    width: 45%;
    font-size: 0.65rem;
  }
  .record li>div:nth-child(2){
    width: 20%;
    font-size: 0.65rem;
  }
  .record li>div:last-child{
    width: 35%;
    text-align: right;
    font-size: 0.6rem;
  }
  .record li span{
    display: inline-block;
    border: 1px solid #C3C3C3;
    border-radius: 1px;
    color: #C3C3C3;
    font-size: 0.35rem;
    margin-right: 0.45rem;
    line-height: 0.65rem;
    text-align: center;
    box-sizing: border-box;
    padding: 0.1rem 0.3rem;
  }
  .record li:first-child span{
    border-color: #c50000;
    color: #c50000;
  }
  .record li:first-child>div:nth-child(2){
    color: #c50000;
  }
  .record .no-bid-record{
    justify-content: center;
  }
  /*店铺名称*/
  .shop-name .weui-media-box__desc{
    height: 0.6rem;
    margin-top: 0.2rem;
  }
  .shop-name .weui-media-box__desc span{
    display: inline-block;
    color: #ffffff;
    background-color: #C50000;
    padding: 0.05rem 0.25rem;
    font-size: 0.5rem;
    line-height: 0.5rem;
    border-radius: 1px;
    vertical-align: top;
  }
  .shop-name .weui-cell__ft{
    color: #000000;
  }
  .shop-name .weui-cell__ft .icon-more{
    color: #000000;
    font-size: 0.7rem;
    font-weight: bold;
  }
  /*评论*/
  .comment .weui-media-box{
    padding-left: 0;
    padding-right: 0;
  }
  .comment .weui-media-box__title{
    font-size: 0.65rem;
    color: #282828;
    font-weight: Bold;
    line-height: 0.65rem;
  }
  .comment .weui-media-box__title span{
    font-size: 0.6rem;
    color: #656565;
    margin-left: 0.5rem;
  }
  .comment .weui-cell__ft{
    display: flex;
    justify-content: space-between;
  }
  .comment .weui-cell__ft .icon{
    font-size: 18px;
  }
  .comment .weui-cell__ft div:first-child{
    margin-right: 0.75rem;
  }
  .comment .weui-cell__ft>div span:last-child{
    color: #656565;
    font-size: 0.6rem;
  }
  .comment .no-comment-record{
    color: #656565;
    font-size: 0.7rem;
    padding: 1rem 0;
    text-align: center;
  }
  .parent-comment{
    position: relative;
    border-top: 1px solid #E5E5E5;
  }
  .comment-box:first-child .parent-comment{
    border-top: none;
  }
  .comment .weui-media-box_appmsg .weui-media-box__bd{
    height: auto;
  }
  .comment .weui-media-box__desc {
    display: block;
    word-break: break-all;
    white-space: pre-wrap;
    word-wrap: break-word;
    text-overflow: inherit;
    overflow: initial;
    color: #656565;
    font-size: 0.65rem;
    line-height: 1.2rem;
    width: 96%;
  }
  .comment .single-text{
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    width: 80%;
  }
  .comment .weui-media-box_appmsg{
    align-items: flex-start;
  }
  /*发送评论*/
  .send-message{
    display: flex;
    border: 1px solid #ccc;
    border-radius: 3px;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
  }
  .send-message .weui-input{
    flex: 1;
    font-size: 0.6rem;
    padding-left:0.5rem;
    box-sizing: border-box;
    height: 1.5rem;
    line-height: 1.5rem;
  }
  .send{
    padding: 0 0.5rem;
    font-size: 0.6rem;
    line-height: 1.5rem;
    color: #C50000;
  }
  .reply{
    order: -1;
    padding-left: 0.5rem;
    font-size: 0.6rem;
    line-height: 1.5rem;
    color: #999;
  }
  .reply-Msg-box{
    padding: 0rem 0.5rem 0.75rem 0.5rem
  }
  .reply-Msg-box .send-message{
    margin-top: 0;
  }
  .weui-textarea{
    flex: 1;
    line-height: 1rem;
    padding: 5px;
  }
    /*footer*/
  .weui-tab{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 999;
    height: auto;
  }
  .weui-tabbar__icon{
    width: 1.2rem;
    height: 1.2rem;
    background-repeat: no-repeat;
    background-size: contain;
  }
  .weui-tabbar__icon.dianpu{
    background-image: url("../../../static/images/lotDetail/shop.png");
  }
  .weui-tabbar__icon.lxmj{
    background-image: url("../../../static/images/lotDetail/msg.png");
  }
  .weui-tabbar__icon.guanzhu{
    background-image: url("../../../static/images/lotDetail/shoucang.png");
  }
  .weui-tabbar__label{
    color: #656565;
    font-size: 0.5rem;
  }
  .weui-tabbar__item.buy{
    flex: 2;
    padding: 0;
  }
  .weui-btn.weui-btn_warn{
    background-color:#C50000;
    border-radius: 0;
    height: 100%;
    line-height: normal;
  }
  /*竞拍记录、评论、出价模态框*/
  .weui-actionsheet__menu .weui-panel__bd,.weui-actionsheet__menu .record{
    max-height: 60vh;
    overflow: auto;
  }
  .weui-mask_transparent{
    background: rgba(0, 0, 0, 0.6);
    opacity: 0;
    display: none;
  }
  .actionsheetToggle .weui-mask_transparent{
    opacity: 1;
    display: block;
  }
  .actionsheetToggle .weui-actionsheet {
     transform: translate(0, 0);
  }
  .rereply-box{
    padding-left: 2.25rem;
    position: relative;
  }
  .rereply-box-border{
    border-top: 1px solid #E5E5E5;
  }
  .weui-media-box:before {
    transform: scaleY(1);
    left: 0;
  }
  /*保证金*/
  .pay-title{
    text-align: center;
    padding: 1rem 0.75rem;
    font-size: 0.8rem;
  }
  .pay-title p{
    font-size: 0.8rem;
  }
  .pay-title .weui-icon-cancel{
    position: absolute;
    top: 0;
    right: 0;
  }
  .pay-warn{
    padding: 20px 15px 30px 15px;
  }
  .pay-warn .weui-cell__bd{
    display: flex;
    padding: 0 1.25rem;
  }
  .pay-warn p{
    font-size: 12px;
    color: #999999;
  }
  .pay-warn .weui-icon-warn{
    font-size: 0.75rem;
  }
  .pay-btn-box{
    margin-top: 0;
  }
  .pay-btn-box .weui-actionsheet__cell{
    background: url("../../../static/images/lotDetail/pay-1.png") no-repeat;
    padding: 0;
    height: 2.5rem;
    line-height: 2.5rem;
    font-size: 0.7rem;
    color: #ffffff;
  }
  /*拍品竞拍框*/
  .lot-bid-box .weui-cell__bd ul{
    display: flex;
    justify-content: space-between;
  }
  .lot-bid-box .weui-cell__bd ul li{
    width: 3.3rem;
    height: 0.9rem;
    line-height: 0.9rem;
    text-align: center;
    color: #ffffff;
    background-color: #C3C3C3;
    font-size: 0.6rem;
    border-radius: 3px;
  }
  .lot-bid-box .weui-cell__bd ul li.active{
    background-color: #C50000;
  }
  .lot-bid-box .bid-text:before{
    border-top:none;
  }
  .lot-bid-box .bid-text .weui-cell__bd{
    color: #656565;
    font-size: 0.6rem;
  }
  .lot-bid-box .bid-text .weui-cell__bd a{
    color: #C50000;
    font-size: 0.6rem;
  }
  .lot-bid-box .bid-price .weui-cell__ft{
    display: flex;
    align-items: center;
  }
  .lot-bid-box .bid-price span{
    width: 0.8rem;
    height: 0.8rem;
    display: inline-block;
  }
  .lot-bid-box .bid-price span img{
    width: 100%;
    vertical-align: top;
  }
  .lot-bid-box .reduce-price{
    margin-right: 0.3rem;
  }
  .lot-bid-box .add-price{
    margin-left: 0.3rem;
  }
  .lot-bid-box .bid-price .weui-input{
    width: 4.8rem;
    height: 1.1rem;
    line-height: 1.1rem;
    border: 1px solid #c1c1c1;
    box-sizing: border-box;
    padding-left: 0.3rem;
    font-size: 0.7rem;
    color: #656565;
  }
  .weui-switch{
    vertical-align: middle;
  }
  .weui-switch:checked, .weui-switch-cp__input:checked ~ .weui-switch-cp__box{
    border-color: #C50000;
    background-color: #C50000;
  }
  .weui-switch, .weui-switch-cp__box {
    width: 2rem;
    height: 1.2rem;
  }
  .weui-switch:after, .weui-switch-cp__box:after {
    width: 1.1rem;
    height: 1.1rem;
  }
  .weui-switch:before, .weui-switch-cp__box:before {
    width: 2rem;
    height: 1.2rem;
  }
  .weui-switch:checked:after, .weui-switch-cp__input:checked ~ .weui-switch-cp__box:after {
    transform: translateX(0.8rem);
  }
  .weui-switch:before, .weui-switch-cp__box:before{
    background-color: #C3C3C3;
  }
  .lot-bid-box .bid-increments,.lot-bid-box .bid-price{
    padding: 0rem 0.65rem;
    height: 2.1rem;
    line-height: 2.1rem;
  }
  .lot-bid-box .weui-cell_switch{
    padding: 0rem 0.65rem;
    height: 3rem;
    line-height: 3rem;
  }
  .weui-media-box_appmsg .weui-media-box__thumb{
    border-radius: 50%;
  }
  .gallery-img{
    width: 100%;
  }

  .video-box{
    width: 100%;
    height: 100%;
    position: relative;
  }
  .video{
    width: 100%;
    height: 100%;
  }
  /*video::-webkit-media-controls-enclosure{*/
    /*display: none;*/
  /*}*/
  video::-webkit-media-controls-panel{
    background-color: transparent;
  }
  video::-webkit-media-controls-mute-button{
    display: none;
  }
  video::-webkit-media-controls-fullscreen-button{
    display: block !important;
  }
  video::-internal-media-controls-download-button{
    display: none;
  }
  video::-webkit-media-controls-volume-slider{
    display: none;
  }
  video::-webkit-media-controls-current-time-display{
    color: #ffffff;
    font-size: 13px;
  }
  video::-webkit-media-controls-time-remaining-display{
    display: block !important;
    color: #ffffff;
    font-size: 13px;
  }
</style>
